<template>
	<view class="container">
		<view class="register-box">
			<view class="logo-section">
				<image class="logo" src="/static/logo.png"></image>
				<text class="title">用户注册</text>
			</view>
			
			<view class="input-section">
				<view class="input-item">
					<text class="input-label">手机号</text>
					<input class="input" type="number" placeholder="请输入手机号" v-model="formData.phone" />
				</view>
				
				<view class="input-item">
					<text class="input-label">密码</text>
					<input class="input" type="password" placeholder="请输入密码" v-model="formData.password" />
				</view>
				
				<view class="input-item">
					<text class="input-label">确认密码</text>
					<input class="input" type="password" placeholder="请再次输入密码" v-model="formData.confirmPassword" />
				</view>
				
				<view class="input-item">
					<text class="input-label">客户类型</text>
					<view class="radio-group">
						<label class="radio-item">
							<radio value="个人" :checked="formData.customerType === '个人'" @click="selectCustomerType('个人')" />
							<text>个人</text>
						</label>
						<label class="radio-item">
							<radio value="企业" :checked="formData.customerType === '企业'" @click="selectCustomerType('企业')" />
							<text>企业</text>
						</label>
					</view>
				</view>
				
				<!-- 客户名称输入框始终显示 -->
				<view class="input-item">
					<text class="input-label">{{ formData.customerType === '企业' ? '企业名称' : '姓名' }}</text>
					<input class="input" type="text" :placeholder="'请输入' + (formData.customerType === '企业' ? '企业名称' : '姓名')" v-model="formData.customerName" />
				</view>
				
				<!-- 企业客户额外信息 -->
				<view v-show="formData.customerType === '企业'">
					<view class="input-item">
						<text class="input-label">对接总负责人</text>
						<input class="input" type="text" placeholder="请输入对接总负责人" v-model="formData.manager" />
					</view>
					
					<view class="input-item">
						<text class="input-label">专属服务专员</text>
						<input class="input" type="text" placeholder="请输入专属服务专员" v-model="formData.specialist" />
					</view>
					
					<view class="input-item">
						<text class="input-label">社区经理</text>
						<input class="input" type="text" placeholder="请输入社区经理" v-model="formData.communityManager" />
					</view>
					
					<view class="input-item">
						<text class="input-label">所属行业</text>
						<picker class="input picker" mode="selector" :range="industryList" range-key="name" @change="onIndustryChange">
							<view class="picker-content">
								<text v-if="!selectedIndustry.name" class="placeholder">请选择所属行业</text>
								<text v-else>{{ selectedIndustry.name }}</text>
							</view>
						</picker>
					</view>
					
					<view class="input-item">
						<text class="input-label">社区</text>
						<input class="input" type="text" placeholder="请输入社区" v-model="formData.community" />
					</view>
				</view>
			</view>
			
			<button class="register-button" @click="handleRegister">注册</button>
			
			<view class="footer">
				<text class="link" @click="goToLogin">已有账号？立即登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { register, getIndustryList } from '../../common/api.js';
	
	export default {
		data() {
			return {
				formData: {
					phone: '',
					password: '',
					confirmPassword: '',
					customerName: '',
					customerType: '', // 默认不选择类型
					community: '',
					manager: '',
					specialist: '',
					communityManager: '',
					industry: ''
				},
				industryList: [], // 行业列表
				selectedIndustry: {} // 选中的行业
			}
		},
		mounted() {
			// 页面加载时获取行业列表
			this.loadIndustryList();
		},
		methods: {
			// 加载行业列表
			loadIndustryList() {
				getIndustryList().then(res => {
					this.industryList = res.data || [];
				}).catch(err => {
					uni.showToast({
						title: '获取行业列表失败',
						icon: 'none'
					});
				});
			},
			
			// 行业选择事件
			onIndustryChange(e) {
				const selectedIndex = e.detail.value;
				this.selectedIndustry = this.industryList[selectedIndex];
				this.formData.industry = this.selectedIndustry.name;
			},
			
			selectCustomerType(type) {
				this.formData.customerType = type;
			},
			
			handleRegister() {
				// 验证手机号
				if (!this.formData.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				
				// 验证密码
				if (!this.formData.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				
				// 验证确认密码
				if (this.formData.password !== this.formData.confirmPassword) {
					uni.showToast({
						title: '两次输入密码不一致',
						icon: 'none'
					});
					return;
				}
				
				// 验证客户姓名/企业名称
				if (!this.formData.customerName) {
					uni.showToast({
						title: this.formData.customerType === '企业' ? '请输入企业名称' : '请输入姓名',
						icon: 'none'
					});
					return;
				}
				
				// 构造注册数据
				const registerData = {
					phone: this.formData.phone,
					password: this.formData.password,
					customerName: this.formData.customerName,
					customerType: this.formData.customerType || '个人' // 如果未选择，默认为个人
				};
				
				// 如果是个人客户，添加社区信息
				if (registerData.customerType === '个人') {
					registerData.community = this.formData.community;
				}
				
				// 如果是企业客户，验证并添加额外信息
				if (this.formData.customerType === '企业') {
					if (!this.formData.manager) {
						uni.showToast({
							title: '请输入对接总负责人',
							icon: 'none'
						});
						return;
					}
					
					if (!this.formData.specialist) {
						uni.showToast({
							title: '请输入专属服务专员',
							icon: 'none'
						});
						return;
					}
					
					if (!this.formData.communityManager) {
						uni.showToast({
							title: '请输入社区经理',
							icon: 'none'
						});
						return;
					}
					
					if (!this.selectedIndustry.name) {
						uni.showToast({
							title: '请选择所属行业',
							icon: 'none'
						});
						return;
					}
					
					if (!this.formData.community) {
						uni.showToast({
							title: '请输入社区',
							icon: 'none'
						});
						return;
					}
					
					// 添加企业客户信息
					registerData.manager = this.formData.manager;
					registerData.specialist = this.formData.specialist;
					registerData.community_manager = this.formData.communityManager; // 注意字段名映射
					registerData.industry_id = this.selectedIndustry.id; // 使用行业ID而不是名称
					registerData.community = this.formData.community;
				}
				
				// 调用注册接口
				register(registerData).then(res => {
					uni.showToast({
						title: '注册成功',
						icon: 'success'
					});
					
					// 跳转到登录页面
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/login/login'
						});
					}, 1000);
				}).catch(err => {
					uni.showToast({
						title: '注册失败',
						icon: 'none'
					});
				});
			},
			
			goToLogin() {
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		padding: 0 40rpx;
		background-color: #f8f8f8;
	}
	
	.register-box {
		width: 100%;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 60rpx 40rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
	}
	
	.logo-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 60rpx;
	}
	
	.logo {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 30rpx;
	}
	
	.title {
		font-size: 48rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.input-section {
		margin-bottom: 50rpx;
	}
	
	.input-item {
		margin-bottom: 30rpx;
	}
	
	.input-label {
		display: block;
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 15rpx;
	}
	
	.input {
		width: 100%;
		height: 80rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}
	
	.picker {
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.picker-content {
		line-height: 80rpx;
	}
	
	.placeholder {
		color: #888;
	}
	
	.radio-group {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 20rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;
	}
	
	.radio-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 40rpx;
	}
	
	.radio-item radio {
		margin-right: 10rpx;
		transform: scale(0.8);
	}
	
	.register-button {
		width: 100%;
		height: 80rpx;
		background-color: #007AFF;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}
	
	.footer {
		display: flex;
		justify-content: center;
	}
	
	.link {
		color: #007AFF;
		font-size: 26rpx;
	}
</style>